{% extends 'base.html' %}

{% block title %}{% if host %}编辑主机{% else %}添加主机{% endif %} - Allen监控系统{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">{% if host %}编辑主机{% else %}添加主机{% endif %}</h5>
    </div>
    <div class="card-body">
        <form method="post">
            {% csrf_token %}
            
            <div class="mb-3">
                <label for="{{ form.hostname.id_for_label }}" class="form-label">主机名</label>
                {{ form.hostname }}
                {% if form.hostname.errors %}
                <div class="invalid-feedback d-block">
                    {{ form.hostname.errors.0 }}
                </div>
                {% endif %}
            </div>

            <div class="mb-3">
                <label for="{{ form.ip_address.id_for_label }}" class="form-label">IP地址</label>
                {{ form.ip_address }}
                {% if form.ip_address.errors %}
                <div class="invalid-feedback d-block">
                    {{ form.ip_address.errors.0 }}
                </div>
                {% endif %}
            </div>

            <div class="mb-3">
                <label for="{{ form.monitor_type.id_for_label }}" class="form-label">监控类型</label>
                {{ form.monitor_type }}
                {% if form.monitor_type.errors %}
                <div class="invalid-feedback d-block">
                    {{ form.monitor_type.errors.0 }}
                </div>
                {% endif %}
            </div>

            <!-- SNMP配置部分 -->
            <div id="snmpConfig" style="display: none;">
                <h6 class="mt-4 mb-3">SNMP配置</h6>
                
                <div class="mb-3">
                    <label for="{{ form.snmp_version.id_for_label }}" class="form-label">SNMP版本</label>
                    {{ form.snmp_version }}
                    {% if form.snmp_version.errors %}
                    <div class="invalid-feedback d-block">
                        {{ form.snmp_version.errors.0 }}
                    </div>
                    {% endif %}
                </div>

                <div class="mb-3">
                    <label for="{{ form.snmp_community.id_for_label }}" class="form-label">团体名</label>
                    {{ form.snmp_community }}
                    {% if form.snmp_community.errors %}
                    <div class="invalid-feedback d-block">
                        {{ form.snmp_community.errors.0 }}
                    </div>
                    {% endif %}
                </div>

                <div class="mb-3">
                    <label for="{{ form.snmp_port.id_for_label }}" class="form-label">端口</label>
                    {{ form.snmp_port }}
                    {% if form.snmp_port.errors %}
                    <div class="invalid-feedback d-block">
                        {{ form.snmp_port.errors.0 }}
                    </div>
                    {% endif %}
                </div>
            </div>

            <div class="mb-3">
                <label for="{{ form.status.id_for_label }}" class="form-label">状态</label>
                {{ form.status }}
                {% if form.status.errors %}
                <div class="invalid-feedback d-block">
                    {{ form.status.errors.0 }}
                </div>
                {% endif %}
            </div>

            <div class="mt-4">
                <button type="submit" class="btn btn-primary">保存</button>
                <a href="{% url 'host_list' %}" class="btn btn-secondary">返回</a>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    function toggleSNMPConfig() {
        if ($('#id_monitor_type').val() === 'snmp') {
            $('#snmpConfig').slideDown();
        } else {
            $('#snmpConfig').slideUp();
        }
    }

    // 初始化时检查
    toggleSNMPConfig();

    // 监控类型改变时检查
    $('#id_monitor_type').change(toggleSNMPConfig);

    // 表单提交处理
    $('form').on('submit', function(e) {
        e.preventDefault();
        
        // 禁用提交按钮防止重复提交
        $('button[type="submit"]').prop('disabled', true);
        
        $.ajax({
            url: window.location.href,
            type: 'POST',
            data: $(this).serialize(),
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            },
            success: function(response) {
                if (response.status === 'success') {
                    // 显示成功消息
                    alert(response.message);
                    // 跳转到主机列表页
                    window.location.href = '{% url "host_list" %}';
                } else {
                    // 显示错误消息
                    alert(response.message);
                    // 如果有具体的表单错误，显示它们
                    if (response.errors) {
                        Object.keys(response.errors).forEach(function(field) {
                            const errorMsg = response.errors[field].join(', ');
                            const fieldElement = $('#id_' + field);
                            fieldElement.addClass('is-invalid');
                            // 添加或更新错误提示
                            let errorDiv = fieldElement.next('.invalid-feedback');
                            if (!errorDiv.length) {
                                errorDiv = $('<div class="invalid-feedback"></div>').insertAfter(fieldElement);
                            }
                            errorDiv.text(errorMsg);
                        });
                    }
                }
            },
            error: function(xhr, status, error) {
                alert('保存失败：' + error);
            },
            complete: function() {
                // 重新启用提交按钮
                $('button[type="submit"]').prop('disabled', false);
            }
        });
    });
});
</script>
{% endblock %} 